<template>
  <div class="container" ref="container">
    <div class="operate" @mouseleave="mouseleave">
      <div
        class="operateBlock"
        :style="{ left: `${left}px`, top: `${top}px` }"
        @mousedown="mousedown"
        @mouseup="mouseup"
        @mousemove="mousemove"
        @mouseleave="mouseleave"
      ></div>
    </div>
    <div
      ref="chart"
      class="chart"
      :style="{
        transform: `translate(-${8 * left}px,-${8 * top}px)`,
      }"
    >
      我是流程图
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      left: 75,
      top: 50,
      drag: false,
      posX: 0,
      posY: 0
    }
  },
  methods: {
    mousedown (e) {
      // console.log('mousedown', e)
      this.drag = true
      this.posX = e.clientX
      this.posY = e.clientY
    },
    mouseup () {
      console.log('mouseup')
      this.drag = false
    },
    mousemove (e) {
      if (this.drag) {
        console.log('mousemove', e)
        this.left += e.clientX - this.posX
        this.top += e.clientY - this.posY
        if (this.left < 0) {
          this.left = 0
        }
        if (this.left > 150) {
          this.left = 150
        }
        if (this.top <= 0) {
          this.top = 0
        }
        if (this.top > 100) {
          this.top = 100
        }
        this.posX = e.clientX
        this.posY = e.clientY
      }
    },
    mouseleave () {
      console.log('mouseleave')
      this.drag = false
    }
  },
  mounted () {
    console.log(this.$refs.container.offsetWidth)
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 800px;
  background: gainsboro;
  position: relative;
  .operate {
    width: 300px;
    height: 200px;
    background: gray;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 999;
    .operateBlock {
      width: 150px;
      height: 100px;
      background: #fff;
      position: absolute;
      cursor: pointer;
    }
  }
  .chart {
    width: 600px;
    height: 450px;
    border: 3px dashed red;
    position: absolute;
    left: 60%;
    top: 60%;
  }
}
</style>